<template>
	<div class="style-craft">
		<div>
			<label>{{ $t('route.Device_Configuration') }}</label>
			<div></div>
			<button><img /><label>{{ $t('route.Scheduling_plan') }}</label></button>
		</div>
		<div>
			<div>
				<el-radio-group @change='typeChange' v-model="type" size="large">
					<el-radio-button :label="$t('route.Cutting_Table')" />
					<el-radio-button :label="$t('route.Sewing')" />
					<el-radio-button :label="$t('route.quality')" />
					<el-radio-button :label="$t('route.Posterior_meatus')" />
				</el-radio-group>
				<el-radio-group v-if="type == $t('route.Sewing')" @change='inLineChange' v-model="inLine" size="large">
					<el-radio-button :label="$t('route.In_line')" />
					<el-radio-button :label="$t('route.Off_line')" />
				</el-radio-group>
			</div>

			<el-table :key="Math.random(100)" :row-style="{ height: 60 + 'px' }" :data="tableData" class="table">

				<el-table-column :label="$t('route.Station_No')" type='index' width='100' />

				<el-table-column :label="$t('route.jockey')" width='300'>
					<template #default="scope">
						<el-select size="default" @change="userChange($event, scope.$index)" class="width100" filterable
							remote :remote-method="getFilterUser" v-model="scope.row.userId" :placeholder="$t('route.Please_enter_employee_name')">
							<el-option v-for="item in userOptions" :key="item.id"
								:label="item.username + '-' + item.nickname" :value="item.id" />
						</el-select>
					</template>
				</el-table-column>

				<el-table-column :label="$t('route.working_procedure')">
					<template #default="scope">
						<el-select size="default" @change="craftChange(scope.$index)" class="width100"
							v-model="scope.row.craftId" :placeholder="$t('route.Please_select_an_operation')">
							<el-option v-for="item in craftOptions" :key="item.id" :label="item.code + '-' + item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</template>
				</el-table-column>

				<el-table-column prop="sewDur" :label="$t('route.Normal_Hours')" width='150' />

				<el-table-column prop="deviceKind" :label="$t('route.Required_vehicle_type')" width='150' />

				<el-table-column fixed="right" :label="$t('route.operate')" width="150">
					<template #default="scope">
						<el-button type="text" @click="saveClick(scope.row)">
							{{ $t('route.preservation') }}
						</el-button>
						<el-button type="text" style="color: #f00;" @click="deleteClick(scope.row)">
							{{ $t('route.Delete') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-button style="width: 100%" @click="addItemClick">{{ $t('route.new_column') }}</el-button>
		</div>


	</div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from '../../js/common/constant.js'
import i18n from '../../i18n/index';
export default {
	data() {
		return {
			proOrder: 0,
			type: i18n.global.t('route.Cutting_Table'),
			inLine: i18n.global.t('route.In_line'),
			tableData: [],
			kindList: Constant.DEVICE_KIND,
			inLineOptions: [{
				value: true,
				label: i18n.global.t('route.In_line')
			}, {
				value: false,
				label: i18n.global.t('route.Off_line')
			}],
			userOptions: [],
			craftOptions: []



		};
	},
	methods: {
		typeChange() {
			this.initTableData();
			this.getAllCraft();
			this.getProPlan();

		},
		inLineChange() {
			this.initTableData();
			this.getAllCraft();
			this.getProPlan();

		},
		saveClick(proPlan) {
			if (CommonUtils.isEmpty(proPlan.userId)) {
				this.$message.error(i18n.global.t('route.Operator_cannot_be_empty'));
				return;
			}
			if (CommonUtils.isEmpty(proPlan.craftId)) {
				this.$message.error(i18n.global.t('route.Operation_cannot_be_empty'));
				return;
			}
			var inLine = null;
			if (this.type == i18n.global.t('route.Sewing')) {
				inLine = this.inLine == i18n.global.t('route.Off_line') ? false : true;
			}
			http.post(api.ADD_PRO_PLAN, {
				userId: proPlan.userId,
				craftId: proPlan.craftId,
				stationCode: proPlan.stationCode,
				proOrderId: this.proOrder.id,
				type: this.type,
				inLine: inLine
			}, data => {
				proPlan.id = data.data.id;
				this.$message.success(i18n.global.t('route.Saved_successfully'));
			});

		},
		deleteClick(proPlan) {
			if (proPlan.id) {
				http.post(api.DELETE_PRO_PLAN, {
					proPlanId: proPlan.id,
				}, data => {
					proPlan.id = null;
					proPlan.userId = null;
					proPlan.craftId = null;
					proPlan.sewDur = null;
					proPlan.deviceKind = null;
					this.$message.success(i18n.global.t('route.Delete_succeeded'));
				});
			} else {
				proPlan.id = null;
				proPlan.userId = null;
				proPlan.craftId = null;
				proPlan.sewDur = null;
				proPlan.deviceKind = null;
				this.$message.success(i18n.global.t('route.Delete_succeeded'));
			}
		},
		addItemClick() {
			this.tableData.push({
				userId: null,
				craftId: null
			});
		},
		getAllCraft() {
			var inLine = null;
			if (this.type == i18n.global.t('route.Sewing')) {
				inLine = this.inLine == i18n.global.t('route.Off_line') ? false : true;
			}
			http.post(api.GET_ALL_CRAFT, {
				styleId: this.proOrder.styleId,
				type: this.type,
				inLine: inLine
			}, data => {
				this.craftOptions = data.data;
			});
		},
		getProPlan() {
			var inLine = null;
			if (this.type == i18n.global.t('route.Sewing')) {
				inLine = this.inLine == i18n.global.t('route.Off_line')? false : true;
			}
			http.post(api.GET_PRO_PLAN1, {
				proOrderId: this.proOrder.id,
				type: this.type,
				inLine: inLine
			}, data => {
				this.userOptions = [];
				for (var item of data.data) {
					this.tableData[item.stationCode - 1] = item;
					this.userOptions.push({
						id: item.userId,
						username: item.username,
						nickname: item.nickname,
					});
				}
			});

		},
		getFilterUser(query) {
			if (CommonUtils.isEmpty(query)) return;
			http.post(api.GET_FILTER_USER, {
				adminId: this.$store.state.user.id,
				search: query,
			}, data => {
				this.userOptions = data.data;
			});
		},
		craftChange(index) {
			console.log("============" + this.tableData[index].craftId);
			var selCraft;
			for (var item of this.craftOptions) {
				if (item.id == this.tableData[index].craftId) {
					selCraft = item;
					break;
				}
			}
			this.tableData[index].sewDur = item.sewDur;
			this.tableData[index].deviceKind = item.deviceKind;
		},
		userChange(value, index) {
			var selUser;
			for (var item of this.userOptions) {
				if (item.id == value) {
					selUser = item;
					break;
				}
			}
			this.tableData[index].username = selUser.username;
			this.tableData[index].nickname = selUser.nickname;
		},
		initTableData() {
			this.tableData = [];
			for (var i = 1; i <= 50; i++) {
				this.tableData.push({
					userId: null,
					username: null,
					nickname: null,
					craftId: null,
					stationCode: i,

				});
			}
		}

	},
	created() {
		var proOrder = CommonUtils.getParam(this, 'proOrder', 'setProOrder');
		if (proOrder) {
			this.proOrder = JSON.parse(proOrder);
		}
		this.initTableData();
		this.getAllCraft();
		this.getProPlan();
	}

};
</script>
<style lang="scss" scoped>
.style-craft {
	color: #444444;
	font-size: 18px;
	padding-right: 20px;
	height: calc(100vh - 100px);
	// overflow: scroll;
	scrollbar-width: none;
	/* firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
	overflow-x: hidden;
	overflow-y: auto;

	>div {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 5px;
	}

	>div:nth-of-type(1) {

		>label:nth-of-type(1) {
			font-weight: 600;
		}

		>div:nth-of-type(1) {
			width: 1px;
			background-color: #cccccc;
			margin: 0px 20px;
		}

		>button:nth-of-type(1) {
			background-image: url(../../assets/img/customer-1.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 5px 10px;
			border: 0px;
			display: flex;
			color: #ffffff;
			flex-direction: row;
			align-items: center;
			font-weight: 800;

			>img {
				margin-right: 7px;
				width: 15px;
				height: 15px;
				content: url(../../assets/img/customer-2.png);
			}

		}
	}

	>div:nth-of-type(2) {
		flex-direction: column;
		align-items: flex-start;

		>div:nth-of-type(1) {
			width: 100%;
			display: flex;
			justify-content: space-between;

		}

		.table {
			width: 100%;
			margin-top: 20px;

			.input {
				width: 60%;
			}
		}

		.btn-save {
			margin-top: 50px;
			width: 200px;
			margin-left: 0px;
		}
	}

	.div-user {
		position: fixed;

	}

}
</style>
